<template>
  <div class="box">
    <el-form size="medium" label-width="70px">
      <el-form-item label="选择包裹">
        <div class="plist">
          <div class="package" v-for="(item, i) in list" :key="i">
            <table cellspacing="0" cellpadding="1" border="1" bordercolor="#dcdfe6" style="border-collapse:collapse;" width="100%">
              <colgroup>
                <col width="130" />
                <col />
                <col width="150" />
                <col width="200" />
              </colgroup>
              <tbody>
                <tr v-for="(sitem, l) in item.orderCommoditys" :key="l">
                  <td v-if="l == 0" :rowspan="item.orderCommoditys.length">
                    {{ item.name }}
                    <el-checkbox v-model="item.selected" style="margin-left:10px"></el-checkbox>
                  </td>
                  <td>
                    <div class="pro">
                      <div class="img"><vimage style="width: 50px; height: 50px;" :src="sitem.master" fit="fit"></vimage></div>
                      <div class="txt">
                        <div class="name">{{ sitem.name }}</div>
                        <div class="class">{{ sitem.pvs_value_new }}</div>
                      </div>
                    </div>
                  </td>
                  <td>X{{ sitem.count }}</td>
                  <td v-if="l == 0" :rowspan="item.orderCommoditys.length">
                    {{ sitem.express_company }}
                    <br />
                    {{ sitem.logistics_no }}
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </el-form-item>

      <el-form-item><el-button type="primary" @click="saveData">取消发货</el-button></el-form-item>
    </el-form>
  </div>
</template>
<script>
import {getOrder, cancelExpress} from '@/api/shop/order';
// import { arrUnique } from '@/utils/index';
export default {
  name: 'orderExpressCancel',
  data() {
    return {
      orderId: '',
      isLoading: false,
      obj: {},
      list: []
    };
  },
  props: {
    order: {
      type: Object,
      default: function() {
        return {};
      }
    }
  },
  created() {},
  methods: {
    //初始化,获取订单详情
    init(id) {
      this.orderId = id;
      this.isLoading = true;
      getOrder(id)
        .then(res => {
          this.isLoading = false;
          let o = res.msg;
          if (o.order_type == 1) {
            //筛选物流单号(包裹号)
            let _temp = [];
            o.orderCommoditys.forEach(e => {
              if (e.logistics_no != null && e.logistics_no != '' && e.logistics_no != ' ' && e.after_status == '3' && e.status == '已发货') {
                if (e.logistics_no && _temp.findIndex(_ => _.logistics_no == e.logistics_no) == -1) {
                  _temp.push({
                    express_company: e.express_company,
                    logistics_no: e.logistics_no
                  });
                }
              }
            });
            //重构包裹清单
            if (_temp.length > 0) {
              _temp.forEach((e, i) => {
                this.list.push({
                  name: '包裹' + (i + 1),
                  orderCommoditys: o.orderCommoditys.filter(_ => _.logistics_no == e.logistics_no),
                  selected: false
                });
              });
            }
          } else {
            this.list.push({
              name: '包裹1',
              orderCommoditys: o.orderCommoditys,
              selected: true
            });
          }

          //处理sku规格数据
          if (this.list.length > 0) {
            this.list.forEach(e => {
              e.orderCommoditys.forEach(x => {
                if (x.pvs_value) {
                  //转换处理SKU数据->红+L+大
                  let l = x.pvs_value.split(','),
                    s = '';
                  l.forEach(k => {
                    s += k.split(':')[1] + '+';
                  });
                  s = s.substring(0, s.length - 1);
                  x.pvs_value_new = s;
                }
              });
            });
          }
        })
        .catch(e => {
          this.isLoading = false;
        });
    },
    //取消发货
    saveData() {
      //封装数据
      let l = this.list.filter(_ => _.selected);
      let ck = [];
      if (l.length == 0) {
        this.$alert('请选择取消发货的包裹');
        return false;
      } else {
        l.forEach(e => {
          e.orderCommoditys.forEach(x => {
            ck.push({
              cid: x.id,
              sku_id: x.sku_id
            });
          });
        });
      }

      //由于后端接收不到array,封装一个字符串
      let ck_s = '';
      ck_s += '[';
      ck.forEach(u => {
        ck_s += '{';
        ck_s += '"cid":' + u.cid + ',';
        ck_s += '"sku_id":' + u.sku_id;
        ck_s += '},';
      });
      ck_s = ck_s.substring(0, ck_s.length - 1);
      ck_s += ']';

      // console.log(ck_s)
      // return false;
      this.isLoading = true;
      cancelExpress({
        order_id: this.orderId,
        cids: ck_s
      })
        .then(res => {
          this.isLoading = false;
          this.$emit('success');
        })
        .catch(e => {
          this.isLoading = false;
        });
    }
  }
};
</script>

<style lang="scss" scoped>
.el-form-item {
  margin-bottom: 15px;
}

.box {
  width: 100%;

  .plist {
    max-height: 300px;
    overflow-y: auto;
  }
}

//选择包裹样式
.package {
  background: #dcdfe6;
  font-size: 14px;
  color: #606266;

  margin-bottom: 10px;

  &:last-child {
    margin-bottom: 0;
  }

  table {
    background: #fff;

    tr {
      td {
        padding: 15px;
        line-height: 28px;
        //border: 1px solid #DCDFE6;

        .pro {
          display: flex;

          .img {
            width: 50px;
            margin-right: 10px;
          }

          .txt {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-content: space-between;

            .name {
              .t0 {
                color: #409eff;
                font-weight: 700;
                margin-right: 5px;
              }

              .t1 {
                color: #f56c6c;
                font-weight: 700;
                margin-right: 5px;
              }
            }
          }
        }
      }
    }
  }
}
</style>
